import React from "react";
import MenuConfig from '../../config'
import { useNavigate } from "react-router-dom";
import * as Icon from '@ant-design/icons'
import { Layout, Menu, } from 'antd';
import { useDispatch, useSelector } from "react-redux";
import { selectMenuList } from "../../store/reducers/tab"

const { Sider } = Layout;

//动态获取菜单icon
const iconToElement = (name) => React.createElement(Icon[name])

//处理菜单数据
const items = MenuConfig.map((item) => {
    //没有子菜单
    const child = {
        key:item.path,
        icon:iconToElement(item.icon),
        label:item.label
    }
    //有子菜单
    if(item.children) {
        child.children = item.children.map(ch => {
            return {
                key:ch.path,
                label:ch.label
            }
        })
    }
    return child
})

const CommonAside = ({collapsed}) => {
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const currentMenu = useSelector((state) => state.tab.currentMenu);

    //添加数据到store
    const setTabList = (val) => {
        dispatch(selectMenuList(val))
    }
    const selectMenu = (e) => {
        let data
        MenuConfig.forEach(item => {
            if (item.path === e.keyPath[e.keyPath.length - 1]) {
                data = item
                //如果是二级菜单
                if(e.keyPath.length > 1) {
                    data = item.children.find(child => {
                        return child.path === e.key
                    })
                }
            }
        })
        setTabList({
            path: data.path,
            name: data.name,
            label: data.label
        })

        navigate(e.key)
    }
    return (
        <Sider trigger={null} collapsed={collapsed}>
            <h3 className="app-name">{ collapsed ? 'Y' : 'YZW的后台管理系统' }</h3>
            <Menu
                theme="dark"
                mode="inline"
                items={items}
                style={{
                    height: '100%'
                }}
                selectedKeys={currentMenu.path}
                onClick={selectMenu}
            />
        </Sider>
    )
}

export default CommonAside